$(() => {
    let L1 = [false, false, false, false, false, false, false, false, false, false];
    let s_L1 = [false, false, false, false, false, false, false, false, false, false];

    let heatMapPicL1_1 = echarts.init(document.getElementById('heatMapL1_1')),
        heatMapPicL1_2 = echarts.init(document.getElementById('heatMapL1_2')),
        heatMapPicL1_3 = echarts.init(document.getElementById('heatMapL1_3')),
        heatMapPicL1_4 = echarts.init(document.getElementById('heatMapL1_4')),
        heatMapPicL1_5 = echarts.init(document.getElementById('heatMapL1_5')),
        heatMapPicL1_6 = echarts.init(document.getElementById('heatMapL1_6')),
        heatMapPicL1_7 = echarts.init(document.getElementById('heatMapL1_7')),
        heatMapPicL1_8 = echarts.init(document.getElementById('heatMapL1_8')),
        heatMapPicL1_9 = echarts.init(document.getElementById('heatMapL1_9')),
        heatMapPicL1_0 = echarts.init(document.getElementById('heatMapL1_0'));

    let s_heatMapPicL1_1 = echarts.init(document.getElementById('s_heatMapL1_1')),
        s_heatMapPicL1_2 = echarts.init(document.getElementById('s_heatMapL1_2')),
        s_heatMapPicL1_3 = echarts.init(document.getElementById('s_heatMapL1_3')),
        s_heatMapPicL1_4 = echarts.init(document.getElementById('s_heatMapL1_4')),
        s_heatMapPicL1_5 = echarts.init(document.getElementById('s_heatMapL1_5')),
        s_heatMapPicL1_6 = echarts.init(document.getElementById('s_heatMapL1_6')),
        s_heatMapPicL1_7 = echarts.init(document.getElementById('s_heatMapL1_7')),
        s_heatMapPicL1_8 = echarts.init(document.getElementById('s_heatMapL1_8')),
        s_heatMapPicL1_9 = echarts.init(document.getElementById('s_heatMapL1_9')),
        s_heatMapPicL1_0 = echarts.init(document.getElementById('s_heatMapL1_0'));

    let s_linePicL1_1 = echarts.init(document.getElementById('s_lineL1_1')),
        s_linePicL1_2 = echarts.init(document.getElementById('s_lineL1_2')),
        s_linePicL1_3 = echarts.init(document.getElementById('s_lineL1_3')),
        s_linePicL1_4 = echarts.init(document.getElementById('s_lineL1_4')),
        s_linePicL1_5 = echarts.init(document.getElementById('s_lineL1_5')),
        s_linePicL1_6 = echarts.init(document.getElementById('s_lineL1_6')),
        s_linePicL1_7 = echarts.init(document.getElementById('s_lineL1_7')),
        s_linePicL1_8 = echarts.init(document.getElementById('s_lineL1_8')),
        s_linePicL1_9 = echarts.init(document.getElementById('s_lineL1_9')),
        s_linePicL1_0 = echarts.init(document.getElementById('s_lineL1_0'));

    let xData = [];
    let yData = [];
    //  x坐标
    for (let i = 0; i <= 136; i++) {
        xData.push(i);
    }
    //  y坐标
    for (let j = 0; j < 401; j++) {
        yData.push(j);
    }

    let firstPosition = 50;     //  markLine初始位置

    //  折线图设置
    lineOption = {
        grid: [{    // 左
            height: '50%',
            width: '60%',
            top: '15%',
            left: '12%'
        }, {    // 左覆盖
            height: '50%',
            width: '60%',
            top: '15%',
            left: '12%'
        }, {    //  右
            height: '50%',
            width: '20%',
            top: '15%',
            left: '75%'
        }, {    //  右覆盖
            height: '50%',
            width: '20%',
            top: '15%',
            left: '75%'
        }],
        xAxis: [{   // 左
            show: false,
            type: 'category',
            data: xData,
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 0,
            id: 'lineXPosition'
        }, {   // 左覆盖
            // show: false,
            type: 'category',
            max: 24,
            data: xData,
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 1,
        }, {    //  右
            show: false,
            type: 'value',
            splitLine: {    //  网格线
                lineStyle: {
                    type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                },
                show: false
            },
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 2
        }, {    //  右覆盖
            // show: false,
            type: 'value',
            splitLine: {    //  网格线
                lineStyle: {
                    type: 'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                },
                show: false
            },
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 3
        }],
        yAxis: [{   // 左
            show: false,
            type: 'category',
            data: yData,
            max: 12,
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 0,
            id: 'lineXPosition'
        }, {   // 左覆盖
            // show: false,
            type: 'category',
            data: yData,
            max: 12,
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 1,
        }, {    //  右
            show: false,
            type: 'category',
            data: yData,
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 2
        }, {    //  右覆盖
            type: 'category',
            data: yData,
            max: 12,
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 3
        }],
        series: [{
            data: [],
            type: 'line',
            markLine: {
                symbol: 'none',
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        lineStyle: {
                            type: 'solid',
                            color: '#333 ',
                            width: 2,
                        },
                        label: {
                            textStyle: {
                                color: '#fff',
                                fontSize: 16,
                                fontWeight: "bolder",
                            },
                        }
                    },
                },
                data: [
                    {xAxis: firstPosition},
                ],
            }
        }, {    //  左覆盖
            data: [],
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1
        }, {    //  右
            data: [],
            type: 'line',
            xAxisIndex: 2,
            yAxisIndex: 2
        }, {     //  右覆盖
            data: [],
            type: 'line',
            xAxisIndex: 3,
            yAxisIndex: 3
        }]
    };

    //  图二类热力图设置
    s_heatMapOption = {
        tooltip: {},
        grid: [{    //  左上
            height: '50%',
            width: '60%',
            top: '15%',
            left: '12%'
        }],
        xAxis: [{   //  左上
            show: false,
            type: 'category',
            data: xData,
            gridIndex: 0,
            id: 'heatMap'
        }],
        yAxis: [{
            show: false,
            type: 'category',
            data: yData,
            gridIndex: 0,
            axisLabel: {
                interval: 20,   //  隔20个显示一个坐标
            },
            id: 'heatMap'
        }],
        visualMap: [{
            min: 0,
            max: 1,
            itemHeight: '100%',
            itemWidth: '10%',
            calculable: false,  //  控制拖动
            realtime: false,
            text: ['1', '-1'],
            textStyle: {
                color: '#fff'
            },
            inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            },
            top: '0%',
        }],
        series: [{  //  左上图
            type: 'heatmap',
            data: [],
            //  标识线
            emphasis: {
                itemStyle: {
                    borderColor: '#333',
                    borderWidth: 1
                }
            },
            progressive: 1000,
            animation: false,
        }]
    };

    //  图一类热力图设置
    heatMapOption = {
        tooltip: {},
        grid: [{    //  heatMap
            height: '60%',
            width: '70%',
            top: '15%',
            left: '20%'
        }, {    //  line
            height: '60%',
            width: '70%',
            top: '15%',
            left: '20%'
        }],
        xAxis: [{   //  heatMap
            show: false,
            type: 'category',
            data: xData,
            gridIndex: 0,
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            id: 'heatMap'
        }, {   //  line
            // show: false,
            type: 'category',
            data: xData,
            max: 24, //  (x轴显示时间)
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 1,
            id: 'heatMap1'
        }],
        yAxis: [{   //  heatMap
            show: false,
            type: 'category',
            data: yData,
            gridIndex: 0,
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            id: 'heatMap'
        }, {    //  line
            // show: false,
            type: 'category',
            data: yData,
            max: 12,
            axisLine: {  //  轴线属性
                lineStyle: {
                    color: '#f2f2f2'
                }
            },
            gridIndex: 1,
            id: 'heatMap1'
        }],
        visualMap: [{
            min: 0,
            max: 1,
            itemHeight: '100%',
            calculable: false,  //  控制拖动
            realtime: false,
            text: ['1', '-1'],
            textStyle: {
                color: '#fff'
            },
            inRange: {
                color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            },
            top: '10%',
            left: '3%'
        }],
        series: [{  //  heatMap
            type: 'heatmap',
            data: [],
            emphasis: {
                itemStyle: {
                    borderColor: '#333',
                    borderWidth: 1
                }
            },
            progressive: 1000,
            animation: false,
        }, {  //  line
            type: 'line',
            data: [],
        }]
    };

    //  图1类热力图
    heatMapPicL1_1.setOption(heatMapOption);
    heatMapPicL1_2.setOption(heatMapOption);
    heatMapPicL1_3.setOption(heatMapOption);
    heatMapPicL1_4.setOption(heatMapOption);
    heatMapPicL1_5.setOption(heatMapOption);
    heatMapPicL1_6.setOption(heatMapOption);
    heatMapPicL1_7.setOption(heatMapOption);
    heatMapPicL1_8.setOption(heatMapOption);
    heatMapPicL1_9.setOption(heatMapOption);
    heatMapPicL1_0.setOption(heatMapOption);

    //  图二类热力图
    s_heatMapPicL1_1.setOption(s_heatMapOption);
    s_heatMapPicL1_2.setOption(s_heatMapOption);
    s_heatMapPicL1_3.setOption(s_heatMapOption);
    s_heatMapPicL1_4.setOption(s_heatMapOption);
    s_heatMapPicL1_5.setOption(s_heatMapOption);
    s_heatMapPicL1_6.setOption(s_heatMapOption);
    s_heatMapPicL1_7.setOption(s_heatMapOption);
    s_heatMapPicL1_8.setOption(s_heatMapOption);
    s_heatMapPicL1_9.setOption(s_heatMapOption);
    s_heatMapPicL1_0.setOption(s_heatMapOption);

    //  图二类折线覆盖图
    s_linePicL1_1.setOption(lineOption);
    s_linePicL1_2.setOption(lineOption);
    s_linePicL1_3.setOption(lineOption);
    s_linePicL1_4.setOption(lineOption);
    s_linePicL1_5.setOption(lineOption);
    s_linePicL1_6.setOption(lineOption);
    s_linePicL1_7.setOption(lineOption);
    s_linePicL1_8.setOption(lineOption);
    s_linePicL1_9.setOption(lineOption);
    s_linePicL1_0.setOption(lineOption);

    // 点击图一类L1按钮事件
    function selectL1Button(id, num) {
        let count = 0;
        $('#' + id).on('click', function () {
            let L1Sum = 0;  //  点了几个L1的按钮
            if (count % 2 === 0) {
                L1[num] = true;
                document.getElementById(id).style.backgroundColor = '#69FF99';
                for (let i = 0; i < 10; i++) {
                    if (L1[i] === true) {
                        L1Sum += 1;
                    }
                }
                choose(L1Sum);
                count++;
            } else {
                L1[num] = false;
                document.getElementById(id).style.backgroundColor = '#397239';
                for (let i = 0; i < 10; i++) {
                    if (L1[i] === true) {
                        L1Sum += 1;
                    }
                }
                choose(L1Sum);
                count++
            }
        })
    }

    //  双击父盒子 放大
    function scaleL1(id, heatMapId, heat, trueSum) {
        let count = 0;
        $('#' + id).on('dblclick', function () {
            if (count % 2 === 0) {
                for (let i = 0; i < 10; i++) {
                    if (id !== 'L1_' + i && L1[i] === true) {
                        document.getElementById('L1_' + i).style.display = 'none';
                    }
                }
                $(this).removeClass().addClass('divL1_1');
                $("#" + heatMapId).removeClass().addClass('PicL1_1');
                count++;
            } else {
                for (let i = 0; i < 10; i++) {
                    if (id !== 'L1_' + i && L1[i] === true) {
                        document.getElementById('L1_' + i).style.display = 'block';
                    }
                }
                $(this).removeClass().addClass('divL1_' + trueSum);
                $("#" + heatMapId).removeClass().addClass('PicL1_' + trueSum);
                count++
            }
            heat.resize();
        });
    }

    function choose(L1Sum) {     //  判断有几幅图就显示对应的样式
        switch (L1Sum) {
            case 0:
                for (let i = 0; i < 10; i++) {
                    document.getElementById('L1_' + i).style.display = 'none';
                }
                break;
            case 1:
                for (let i = 0; i < 10; i++) {
                    if (L1[i] === true) {
                        document.getElementById('L1_' + i).style.display = 'block';
                        $('#L1_' + i).removeClass().addClass('divL1_1');
                        $('#heatMapL1_' + i).removeClass().addClass('PicL1_1');
                        echarts.init(document.getElementById('heatMapL1_' + i)).resize();
                        scaleL1('L1_' + i, 'heatMapL1_' + i, echarts.init(document.getElementById('heatMapL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('L1_' + i).style.display = 'none';
                    }

                }
                break;
            case 2:
                for (let i = 0; i < 10; i++) {
                    if (L1[i] === true) {
                        document.getElementById('L1_' + i).style.display = 'block';
                        $('#L1_' + i).removeClass().addClass('divL1_2');
                        $('#heatMapL1_' + i).removeClass().addClass('PicL1_2');
                        echarts.init(document.getElementById('heatMapL1_' + i)).resize();
                        scaleL1('L1_' + i, 'heatMapL1_' + i, echarts.init(document.getElementById('heatMapL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('L1_' + i).style.display = 'none';
                    }
                }
                break;
            case 3:
                for (let i = 0; i < 10; i++) {
                    if (L1[i] === true) {
                        document.getElementById('L1_' + i).style.display = 'block';
                        $('#L1_' + i).removeClass().addClass('divL1_3');
                        $('#heatMapL1_' + i).removeClass().addClass('PicL1_3');
                        echarts.init(document.getElementById('heatMapL1_' + i)).resize();
                        scaleL1('L1_' + i, 'heatMapL1_' + i, echarts.init(document.getElementById('heatMapL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('L1_' + i).style.display = 'none';
                    }
                }
                break;
            case 4:
                for (let i = 0; i < 10; i++) {
                    if (L1[i] === true) {
                        document.getElementById('L1_' + i).style.display = 'block';
                        $('#L1_' + i).removeClass().addClass('divL1_4');
                        $('#heatMapL1_' + i).removeClass().addClass('PicL1_4');
                        echarts.init(document.getElementById('heatMapL1_' + i)).resize();
                        scaleL1('L1_' + i, 'heatMapL1_' + i, echarts.init(document.getElementById('heatMapL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('L1_' + i).style.display = 'none';
                    }
                }
                break;
            case 5:
                for (let i = 0; i < 10; i++) {
                    if (L1[i] === true) {
                        document.getElementById('L1_' + i).style.display = 'block';
                        $('#L1_' + i).removeClass().addClass('divL1_5');
                        $('#heatMapL1_' + i).removeClass().addClass('PicL1_5');
                        echarts.init(document.getElementById('heatMapL1_' + i)).resize();
                        scaleL1('L1_' + i, 'heatMapL1_' + i, echarts.init(document.getElementById('heatMapL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('L1_' + i).style.display = 'none';
                    }
                }
                break;
            case 6:
                for (let i = 0; i < 10; i++) {
                    if (L1[i] === true) {
                        document.getElementById('L1_' + i).style.display = 'block';
                        $('#L1_' + i).removeClass().addClass('divL1_6');
                        $('#heatMapL1_' + i).removeClass().addClass('PicL1_6');
                        echarts.init(document.getElementById('heatMapL1_' + i)).resize();
                        scaleL1('L1_' + i, 'heatMapL1_' + i, echarts.init(document.getElementById('heatMapL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('L1_' + i).style.display = 'none';
                    }
                }
                break;
            case 7:
                for (let i = 0; i < 10; i++) {
                    if (L1[i] === true) {
                        document.getElementById('L1_' + i).style.display = 'block';
                        $('#L1_' + i).removeClass().addClass('divL1_7');
                        $('#heatMapL1_' + i).removeClass().addClass('PicL1_7');
                        echarts.init(document.getElementById('heatMapL1_' + i)).resize();
                        scaleL1('L1_' + i, 'heatMapL1_' + i, echarts.init(document.getElementById('heatMapL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('L1_' + i).style.display = 'none';
                    }
                }
                break;
            case 8:
                for (let i = 0; i < 10; i++) {
                    if (L1[i] === true) {
                        document.getElementById('L1_' + i).style.display = 'block';
                        $('#L1_' + i).removeClass().addClass('divL1_8');
                        $('#heatMapL1_' + i).removeClass().addClass('PicL1_8');
                        echarts.init(document.getElementById('heatMapL1_' + i)).resize();
                        scaleL1('L1_' + i, 'heatMapL1_' + i, echarts.init(document.getElementById('heatMapL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('L1_' + i).style.display = 'none';
                    }
                }
                break;
            case 9:
                for (let i = 0; i < 10; i++) {
                    if (L1[i] === true) {
                        document.getElementById('L1_' + i).style.display = 'block';
                        $('#L1_' + i).removeClass().addClass('divL1_9');
                        $('#heatMapL1_' + i).removeClass().addClass('PicL1_9');
                        echarts.init(document.getElementById('heatMapL1_' + i)).resize();
                        scaleL1('L1_' + i, 'heatMapL1_' + i, echarts.init(document.getElementById('heatMapL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('L1_' + i).style.display = 'none';
                    }
                }
                break;
            case 10:
                for (let i = 0; i < 10; i++) {
                    if (L1[i] === true) {
                        document.getElementById('L1_' + i).style.display = 'block';
                        $('#L1_' + i).removeClass().addClass('divL1_10');
                        $('#heatMapL1_' + i).removeClass().addClass('PicL1_10');
                        echarts.init(document.getElementById('heatMapL1_' + i)).resize();
                        scaleL1('L1_' + i, 'heatMapL1_' + i, echarts.init(document.getElementById('heatMapL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('L1_' + i).style.display = 'none';
                    }
                }
                break;
        }
    }

    $('#downRight_L1_Clear').on('click', function () {
        for (let i = 0; i < 10; i++) {
            document.getElementById('L1_' + i).style.display = 'none';
            document.getElementById('downRight_L1_' + i).style.backgroundColor = '#397239';
        }
        L1 = [false, false, false, false, false, false, false, false, false, false];
    });


    // selectL1Button('downRight_L1_1', 1);
    // selectL1Button('downRight_L1_2', 2);
    // selectL1Button('downRight_L1_3', 3);
    // selectL1Button('downRight_L1_4', 4);
    // selectL1Button('downRight_L1_5', 5);
    // selectL1Button('downRight_L1_6', 6);
    // selectL1Button('downRight_L1_7', 7);
    // selectL1Button('downRight_L1_8', 8);
    // selectL1Button('downRight_L1_9', 9);
    // selectL1Button('downRight_L1_0', 0);


    //  拖动线及拖动事件
    function lineMove(line, heat) {
        let movePosition = 50;
        let heatMapData = [1];      //  热力图数据
        let lineData = [];          //  折线图数据
        line.setOption({
            graphic: {
                type: 'rect',
                z: 100,
                shape: {
                    width: 0,
                    height: 600
                },
                position: [line.convertToPixel({xAxisId: 'lineXPosition'}, firstPosition), 0],  //
                // position: [s_heatMapPicL1_0.convertToPixel({xAxisId: 'heatMap'}, firstPosition), 0],
                draggable: true,
                style: {
                    fill: 'rgba(0,0,0,0.3)',
                    stroke: 'rgba(0,0,0,0.1)',
                    lineWidth: 10
                },
                cursor: 'move',
                ondrag: onPointDragging
            },
        });

        function onPointDragging() {
            //阈值变动
            movePosition = heat.convertFromPixel({xAxisId: 'heatMap'}, this.position[0]);
            // movePosition1 = movePosition * 3 / 100;
            for (let i = 0; i < heatMapData.length; i++) {
                if (heatMapData.length > 0) {
                    if (heatMapData[i][0] === movePosition) {
                        lineData.push(heatMapData[i][2]);
                    }
                }
            }

            line.setOption({
                series: [{
                    markLine: {
                        data: [{xAxis: movePosition}],
                    }
                }, {
                    data: [],
                }, {
                    type: 'line',
                    data: lineData,
                }]
            });
            lineData.length = 0;
        }
    }

    //  点击图二类L1按钮事件
    function s_selectL1Button(id, num) {
        let count = 0;
        $('#' + id).on('click', function () {
            let L1Sum = 0;  //  点了几个L1的按钮
            if (count % 2 === 0) {
                s_L1[num] = true;
                document.getElementById(id).style.backgroundColor = '#69FF99';
                for (let i = 0; i < 10; i++) {
                    if (s_L1[i] === true) {
                        L1Sum += 1;
                    }
                }
                s_choose(L1Sum);
                count++;
            } else {
                s_L1[num] = false;
                document.getElementById(id).style.backgroundColor = '#397239';
                for (let i = 0; i < 10; i++) {
                    if (s_L1[i] === true) {
                        L1Sum += 1;
                    }
                }
                s_choose(L1Sum);
                count++
            }
        })
    }

    //  双击父盒子 放大
    function s_scaleL1(id, heatMapId, heat, lineId, line, trueSum) {
        let count = 0;
        $('#' + id).on('dblclick', function () {
            if (count % 2 === 0) {
                for (let i = 0; i < 10; i++) {
                    if (id !== 's_L1_' + i && s_L1[i] === true) {
                        document.getElementById('s_L1_' + i).style.display = 'none';
                    }
                }
                $(this).removeClass().addClass('divL1_1');
                $("#" + heatMapId).removeClass().addClass('PicL1_1');
                $("#" + lineId).removeClass().addClass('PicL1_1');
                heat.resize();
                line.resize();
                line.setOption({
                    graphic: {
                        type: 'rect',
                        z: 100,
                        shape: {
                            width: 0,
                            height: 600
                        },
                        position: [line.convertToPixel({xAxisId: 'lineXPosition'}, firstPosition), 0],
                        // position: [s_heatMapPicL1_0.convertToPixel({xAxisId: 'heatMap'}, firstPosition), 0],
                        draggable: true,
                        style: {
                            fill: 'rgba(0,0,0,0.3)',
                            stroke: 'rgba(0,0,0,0.1)',
                            lineWidth: 10
                        },
                        cursor: 'move',
                    },
                });
                count++;
            } else {
                for (let i = 0; i < 10; i++) {
                    if (id !== 's_L1_' + i && s_L1[i] === true) {
                        document.getElementById('s_L1_' + i).style.display = 'block';
                    }
                }
                $(this).removeClass().addClass('divL1_' + trueSum);
                $("#" + heatMapId).removeClass().addClass('PicL1_' + trueSum);
                $("#" + lineId).removeClass().addClass('PicL1_' + trueSum);
                heat.resize();
                line.resize();
                line.setOption({
                    graphic: {
                        type: 'rect',
                        z: 100,
                        shape: {
                            width: 0,
                            height: 600
                        },
                        position: [line.convertToPixel({xAxisId: 'lineXPosition'}, firstPosition), 0],
                        // position: [s_heatMapPicL1_0.convertToPixel({xAxisId: 'heatMap'}, firstPosition), 0],
                        draggable: true,
                        style: {
                            fill: 'rgba(0,0,0,0.3)',
                            stroke: 'rgba(0,0,0,0.1)',
                            lineWidth: 10
                        },
                        cursor: 'move',
                    },
                });
                count++
            }
        });
    }


    function s_choose(L1Sum) {     //  判断有几幅图就显示对应的样式
        switch (L1Sum) {
            case 0:
                for (let i = 0; i < 10; i++) {
                    document.getElementById('s_L1_' + i).style.display = 'none';
                }
                break;
            case 1:
                for (let i = 0; i < 10; i++) {
                    if (s_L1[i] === true) {
                        document.getElementById('s_L1_' + i).style.display = 'block';
                        $('#s_L1_' + i).removeClass().addClass('divL1_1');
                        $('#s_heatMapL1_' + i).removeClass().addClass('PicL1_1');
                        $('#s_lineL1_' + i).removeClass().addClass('PicL1_1');
                        echarts.init(document.getElementById('s_heatMapL1_' + i)).resize();
                        echarts.init(document.getElementById('s_lineL1_' + i)).resize();
                        lineMove(echarts.init(document.getElementById('s_lineL1_' + i)), echarts.init(document.getElementById('s_heatMapL1_' + i)));
                        s_scaleL1('s_L1_' + i, 's_heatMapL1_' + i, echarts.init(document.getElementById('s_heatMapL1_' + i)), 's_lineL1_' + i, echarts.init(document.getElementById('s_lineL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('s_L1_' + i).style.display = 'none';
                    }

                }
                break;
            case 2:
                for (let i = 0; i < 10; i++) {
                    if (s_L1[i] === true) {
                        document.getElementById('s_L1_' + i).style.display = 'block';
                        $('#s_L1_' + i).removeClass().addClass('divL1_2');
                        $('#s_heatMapL1_' + i).removeClass().addClass('PicL1_2');
                        $('#s_lineL1_' + i).removeClass().addClass('PicL1_2');
                        echarts.init(document.getElementById('s_heatMapL1_' + i)).resize();
                        echarts.init(document.getElementById('s_lineL1_' + i)).resize();
                        lineMove(echarts.init(document.getElementById('s_lineL1_' + i)), echarts.init(document.getElementById('s_heatMapL1_' + i)));
                        s_scaleL1('s_L1_' + i, 's_heatMapL1_' + i, echarts.init(document.getElementById('s_heatMapL1_' + i)), 's_lineL1_' + i, echarts.init(document.getElementById('s_lineL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('s_L1_' + i).style.display = 'none';
                    }
                }
                break;
            case 3:
                for (let i = 0; i < 10; i++) {
                    if (s_L1[i] === true) {
                        document.getElementById('s_L1_' + i).style.display = 'block';
                        $('#s_L1_' + i).removeClass().addClass('divL1_3');
                        $('#s_heatMapL1_' + i).removeClass().addClass('PicL1_3');
                        $('#s_lineL1_' + i).removeClass().addClass('PicL1_3');
                        echarts.init(document.getElementById('s_heatMapL1_' + i)).resize();
                        echarts.init(document.getElementById('s_lineL1_' + i)).resize();
                        lineMove(echarts.init(document.getElementById('s_lineL1_' + i)), echarts.init(document.getElementById('s_heatMapL1_' + i)));
                        s_scaleL1('s_L1_' + i, 's_heatMapL1_' + i, echarts.init(document.getElementById('s_heatMapL1_' + i)), 's_lineL1_' + i, echarts.init(document.getElementById('s_lineL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('s_L1_' + i).style.display = 'none';
                    }
                }
                break;
            case 4:
                for (let i = 0; i < 10; i++) {
                    if (s_L1[i] === true) {
                        document.getElementById('s_L1_' + i).style.display = 'block';
                        $('#s_L1_' + i).removeClass().addClass('divL1_4');
                        $('#s_heatMapL1_' + i).removeClass().addClass('PicL1_4');
                        $('#s_lineL1_' + i).removeClass().addClass('PicL1_4');
                        echarts.init(document.getElementById('s_heatMapL1_' + i)).resize();
                        echarts.init(document.getElementById('s_lineL1_' + i)).resize();
                        lineMove(echarts.init(document.getElementById('s_lineL1_' + i)), echarts.init(document.getElementById('s_heatMapL1_' + i)));
                        s_scaleL1('s_L1_' + i, 's_heatMapL1_' + i, echarts.init(document.getElementById('s_heatMapL1_' + i)), 's_lineL1_' + i, echarts.init(document.getElementById('s_lineL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('s_L1_' + i).style.display = 'none';
                    }
                }
                break;
            case 5:
                for (let i = 0; i < 10; i++) {
                    if (s_L1[i] === true) {
                        document.getElementById('s_L1_' + i).style.display = 'block';
                        $('#s_L1_' + i).removeClass().addClass('divL1_5');
                        $('#s_heatMapL1_' + i).removeClass().addClass('PicL1_5');
                        $('#s_lineL1_' + i).removeClass().addClass('PicL1_5');
                        echarts.init(document.getElementById('s_heatMapL1_' + i)).resize();
                        echarts.init(document.getElementById('s_lineL1_' + i)).resize();
                        lineMove(echarts.init(document.getElementById('s_lineL1_' + i)), echarts.init(document.getElementById('s_heatMapL1_' + i)));
                        s_scaleL1('s_L1_' + i, 's_heatMapL1_' + i, echarts.init(document.getElementById('s_heatMapL1_' + i)), 's_lineL1_' + i, echarts.init(document.getElementById('s_lineL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('s_L1_' + i).style.display = 'none';
                    }
                }
                break;
            case 6:
                for (let i = 0; i < 10; i++) {
                    if (s_L1[i] === true) {
                        document.getElementById('s_L1_' + i).style.display = 'block';
                        $('#s_L1_' + i).removeClass().addClass('divL1_6');
                        $('#s_heatMapL1_' + i).removeClass().addClass('PicL1_6');
                        $('#s_lineL1_' + i).removeClass().addClass('PicL1_6');
                        echarts.init(document.getElementById('s_heatMapL1_' + i)).resize();
                        echarts.init(document.getElementById('s_lineL1_' + i)).resize();
                        lineMove(echarts.init(document.getElementById('s_lineL1_' + i)), echarts.init(document.getElementById('s_heatMapL1_' + i)));
                        s_scaleL1('s_L1_' + i, 's_heatMapL1_' + i, echarts.init(document.getElementById('s_heatMapL1_' + i)), 's_lineL1_' + i, echarts.init(document.getElementById('s_lineL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('s_L1_' + i).style.display = 'none';
                    }
                }
                break;
            case 7:
                for (let i = 0; i < 10; i++) {
                    if (s_L1[i] === true) {
                        document.getElementById('s_L1_' + i).style.display = 'block';
                        $('#s_L1_' + i).removeClass().addClass('divL1_7');
                        $('#s_heatMapL1_' + i).removeClass().addClass('PicL1_7');
                        $('#s_lineL1_' + i).removeClass().addClass('PicL1_7');
                        echarts.init(document.getElementById('s_heatMapL1_' + i)).resize();
                        echarts.init(document.getElementById('s_lineL1_' + i)).resize();
                        lineMove(echarts.init(document.getElementById('s_lineL1_' + i)), echarts.init(document.getElementById('s_heatMapL1_' + i)));
                        s_scaleL1('s_L1_' + i, 's_heatMapL1_' + i, echarts.init(document.getElementById('s_heatMapL1_' + i)), 's_lineL1_' + i, echarts.init(document.getElementById('s_lineL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('s_L1_' + i).style.display = 'none';
                    }
                }
                break;
            case 8:
                for (let i = 0; i < 10; i++) {
                    if (s_L1[i] === true) {
                        document.getElementById('s_L1_' + i).style.display = 'block';
                        $('#s_L1_' + i).removeClass().addClass('divL1_8');
                        $('#s_heatMapL1_' + i).removeClass().addClass('PicL1_8');
                        $('#s_lineL1_' + i).removeClass().addClass('PicL1_8');
                        echarts.init(document.getElementById('s_heatMapL1_' + i)).resize();
                        echarts.init(document.getElementById('s_lineL1_' + i)).resize();
                        lineMove(echarts.init(document.getElementById('s_lineL1_' + i)), echarts.init(document.getElementById('s_heatMapL1_' + i)));
                        s_scaleL1('s_L1_' + i, 's_heatMapL1_' + i, echarts.init(document.getElementById('s_heatMapL1_' + i)), 's_lineL1_' + i, echarts.init(document.getElementById('s_lineL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('s_L1_' + i).style.display = 'none';
                    }
                }
                break;
            case 9:
                for (let i = 0; i < 10; i++) {
                    if (s_L1[i] === true) {
                        document.getElementById('s_L1_' + i).style.display = 'block';
                        $('#s_L1_' + i).removeClass().addClass('divL1_9');
                        $('#s_heatMapL1_' + i).removeClass().addClass('PicL1_9');
                        $('#s_lineL1_' + i).removeClass().addClass('PicL1_9');
                        echarts.init(document.getElementById('s_heatMapL1_' + i)).resize();
                        echarts.init(document.getElementById('s_lineL1_' + i)).resize();
                        lineMove(echarts.init(document.getElementById('s_lineL1_' + i)), echarts.init(document.getElementById('s_heatMapL1_' + i)));
                        s_scaleL1('s_L1_' + i, 's_heatMapL1_' + i, echarts.init(document.getElementById('s_heatMapL1_' + i)), 's_lineL1_' + i, echarts.init(document.getElementById('s_lineL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('s_L1_' + i).style.display = 'none';
                    }
                }
                break;
            case 10:
                for (let i = 0; i < 10; i++) {
                    if (s_L1[i] === true) {
                        document.getElementById('s_L1_' + i).style.display = 'block';
                        $('#s_L1_' + i).removeClass().addClass('divL1_10');
                        $('#s_heatMapL1_' + i).removeClass().addClass('PicL1_10');
                        $('#s_lineL1_' + i).removeClass().addClass('PicL1_10');
                        echarts.init(document.getElementById('s_heatMapL1_' + i)).resize();
                        echarts.init(document.getElementById('s_lineL1_' + i)).resize();
                        lineMove(echarts.init(document.getElementById('s_lineL1_' + i)), echarts.init(document.getElementById('s_heatMapL1_' + i)));
                        s_scaleL1('s_L1_' + i, 's_heatMapL1_' + i, echarts.init(document.getElementById('s_heatMapL1_' + i)), 's_lineL1_' + i, echarts.init(document.getElementById('s_lineL1_' + i)), L1Sum);
                    } else {
                        document.getElementById('s_L1_' + i).style.display = 'none';
                    }
                }
                break;
        }
    }

    //  图二类清除按钮
    $('#s_downRight_L1_Clear').on('click', function () {
        for (let i = 0; i < 10; i++) {
            document.getElementById('s_L1_' + i).style.display = 'none';
            document.getElementById('s_downRight_L1_' + i).style.backgroundColor = '#397239';
        }
        s_L1 = [false, false, false, false, false, false, false, false, false, false];
    });

    // s_selectL1Button('s_downRight_L1_1', 1);
    // s_selectL1Button('s_downRight_L1_2', 2);
    // s_selectL1Button('s_downRight_L1_3', 3);
    // s_selectL1Button('s_downRight_L1_4', 4);
    // s_selectL1Button('s_downRight_L1_5', 5);
    // s_selectL1Button('s_downRight_L1_6', 6);
    // s_selectL1Button('s_downRight_L1_7', 7);
    // s_selectL1Button('s_downRight_L1_8', 8);
    // s_selectL1Button('s_downRight_L1_9', 9);
    // s_selectL1Button('s_downRight_L1_0', 0);


    //  图一类和图二类绑定点击方法
    for (let i = 0; i < 10; i++) {
        selectL1Button('downRight_L1_' + i, i);
        s_selectL1Button('s_downRight_L1_' + i, i);
    }

});